<template>
  <div class="app-container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/cms/frontend/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{ categoryName || '文章列表' }}</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="main-content">
      <!-- 左侧文章列表 -->
      <div class="article-list">
        <div class="list-header">
          <h1>{{ categoryName || '全部文章' }}</h1>
          <div class="sort-options">
            <el-radio-group v-model="sortBy" @change="handleSortChange">
              <el-radio-button label="publishTime">时间</el-radio-button>
              <el-radio-button label="viewCount">浏览量</el-radio-button>
              <el-radio-button label="likeCount">点赞数</el-radio-button>
            </el-radio-group>
          </div>
        </div>

        <div class="article-item" v-for="article in articleList" :key="article.articleId">
          <div class="article-header">
            <h2 class="article-title">
              <router-link :to="'/cms/frontend/detail/' + article.articleId">
                {{ article.title }}
              </router-link>
            </h2>
            <div class="article-meta">
              <span class="author">作者：{{ article.author }}</span>
              <span class="time">发布时间：{{ parseTime(article.publishTime) }}</span>
              <span class="views">浏览：{{ article.viewCount }}</span>
            </div>
          </div>
          <div class="article-summary" v-if="article.summary">
            <p>{{ article.summary }}</p>
          </div>
          <div class="article-tags">
            <el-tag 
              v-for="tag in article.tags" 
              :key="tag.tagId" 
              size="mini"
              @click="handleTagClick(tag)"
              class="tag-item"
            >
              {{ tag.tagName }}
            </el-tag>
          </div>
        </div>

        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-size="pageSize"
            :total="total"
            layout="prev, pager, next, jumper"
          />
        </div>
      </div>

      <!-- 右侧边栏 -->
      <div class="sidebar">
        <!-- 文章分类 -->
        <div class="sidebar-block">
          <h3>文章分类</h3>
          <ul class="category-list">
            <li :class="{ active: !selectedCategoryId }">
              <a href="javascript:void(0)" @click="handleCategoryClick(null)">全部分类</a>
            </li>
            <li v-for="category in categoryList" :key="category.categoryId" 
                :class="{ active: selectedCategoryId === category.categoryId }">
              <a href="javascript:void(0)" @click="handleCategoryClick(category)">{{ category.categoryName }}</a>
            </li>
          </ul>
        </div>

        <!-- 热门文章 -->
        <div class="sidebar-block">
          <h3>热门文章</h3>
          <ul class="hot-articles">
            <li v-for="article in hotArticles" :key="article.articleId">
              <router-link :to="'/cms/frontend/detail/' + article.articleId">
                {{ article.title }}
              </router-link>
            </li>
          </ul>
        </div>

        <!-- 标签云 -->
        <div class="sidebar-block">
          <h3>标签云</h3>
          <div class="tag-cloud">
            <el-tag 
              v-for="tag in tagList" 
              :key="tag.tagId" 
              size="small" 
              @click="handleTagClick(tag)"
              class="tag-item"
            >
              {{ tag.tagName }}
            </el-tag>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FrontendList",
  data() {
    return {
      // 分类名称
      categoryName: "",
      // 选中的分类ID
      selectedCategoryId: null,
      // 排序方式
      sortBy: "publishTime",
      // 文章列表
      articleList: [],
      // 分类列表
      categoryList: [],
      // 热门文章
      hotArticles: [],
      // 标签列表
      tagList: [],
      // 分页参数
      pageNum: 1,
      pageSize: 10,
      total: 0
    };
  },
  created() {
    this.getList();
    this.getCategoryList();
    this.getHotArticles();
    this.getTagList();
    
    // 获取路由参数
    const categoryId = this.$route.query.categoryId;
    if (categoryId) {
      this.selectedCategoryId = parseInt(categoryId);
      // 根据分类ID获取分类名称
      const category = this.categoryList.find(item => item.categoryId === this.selectedCategoryId);
      if (category) {
        this.categoryName = category.categoryName;
      }
    }
  },
  methods: {
    /** 获取文章列表 */
    getList() {
      // 模拟数据
      this.articleList = [
        {
          articleId: 1,
          title: "若依CMS系统正式发布",
          author: "若依科技",
          publishTime: new Date(),
          viewCount: 128,
          summary: "若依CMS内容管理系统正式发布，提供强大的内容管理功能...",
          tags: [
            { tagId: 1, tagName: "系统发布" },
            { tagId: 2, tagName: "CMS" }
          ]
        },
        {
          articleId: 2,
          title: "如何使用若依CMS管理系统",
          author: "若依科技",
          publishTime: new Date(),
          viewCount: 96,
          summary: "本文将详细介绍如何使用若依CMS管理系统进行内容管理...",
          tags: [
            { tagId: 3, tagName: "使用指南" },
            { tagId: 2, tagName: "CMS" }
          ]
        }
      ];
      this.total = 20;
    },
    /** 获取分类列表 */
    getCategoryList() {
      // 模拟数据
      this.categoryList = [
        { categoryId: 1, categoryName: "系统公告", parentId: 0 },
        { categoryId: 2, categoryName: "技术文章", parentId: 0 },
        { categoryId: 3, categoryName: "行业资讯", parentId: 0 }
      ];
    },
    /** 获取热门文章 */
    getHotArticles() {
      // 模拟数据
      this.hotArticles = [
        { articleId: 1, title: "若依CMS系统正式发布" },
        { articleId: 2, title: "如何使用若依CMS管理系统" },
        { articleId: 3, title: "若依CMS系统功能介绍" }
      ];
    },
    /** 获取标签列表 */
    getTagList() {
      // 模拟数据
      this.tagList = [
        { tagId: 1, tagName: "系统发布" },
        { tagId: 2, tagName: "CMS" },
        { tagId: 3, tagName: "使用指南" },
        { tagId: 4, tagName: "功能介绍" }
      ];
    },
    /** 分类点击处理 */
    handleCategoryClick(category) {
      if (category) {
        this.selectedCategoryId = category.categoryId;
        this.categoryName = category.categoryName;
        this.pageNum = 1;
        this.getList();
      } else {
        this.selectedCategoryId = null;
        this.categoryName = "";
        this.pageNum = 1;
        this.getList();
      }
    },
    /** 标签点击处理 */
    handleTagClick(tag) {
      this.$router.push(`/cms/frontend/list?tagId=${tag.tagId}`);
    },
    /** 排序方式改变 */
    handleSortChange() {
      this.pageNum = 1;
      this.getList();
    },
    /** 分页处理 */
    handleCurrentChange(page) {
      this.pageNum = page;
      this.getList();
    }
  }
};
</script>

<style scoped>
.el-breadcrumb {
  margin-bottom: 20px;
  padding: 10px 0;
  background: #f5f5f5;
  border-radius: 4px;
}

.main-content {
  display: flex;
  flex-direction: row;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.list-header h1 {
  margin: 0;
}

.article-list {
  flex: 3;
  margin-right: 20px;
}

.article-item {
  border-bottom: 1px solid #eee;
  padding: 20px 0;
}

.article-item:last-child {
  border-bottom: none;
}

.article-title {
  margin: 0 0 10px 0;
}

.article-title a {
  color: #333;
  text-decoration: none;
}

.article-title a:hover {
  color: #409EFF;
}

.article-meta {
  font-size: 14px;
  color: #999;
  margin-bottom: 10px;
}

.article-meta span {
  margin-right: 15px;
}

.article-summary {
  margin-bottom: 10px;
}

.article-summary p {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.tag-item {
  cursor: pointer;
  margin-right: 5px;
}

.sidebar {
  flex: 1;
}

.sidebar-block {
  background: #f8f9fa;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 20px;
}

.sidebar-block h3 {
  margin-top: 0;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-list li {
  padding: 8px 0;
  border-bottom: 1px dashed #eee;
}

.category-list li:last-child {
  border-bottom: none;
}

.category-list li.active a {
  color: #409EFF;
  font-weight: bold;
}

.category-list a {
  color: #666;
  text-decoration: none;
}

.category-list a:hover {
  color: #409EFF;
}

.hot-articles,
.friend-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hot-articles li,
.friend-links li {
  padding: 5px 0;
  border-bottom: 1px dashed #eee;
}

.hot-articles li:last-child,
.friend-links li:last-child {
  border-bottom: none;
}

.hot-articles a,
.friend-links a {
  color: #666;
  text-decoration: none;
}

.hot-articles a:hover,
.friend-links a:hover {
  color: #409EFF;
}

.tag-cloud .el-tag {
  margin-right: 8px;
  margin-bottom: 8px;
  cursor: pointer;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>